<template>
  <!--大框-->
  <div>

    <!--台号-->
    <div class="pnumber">
      <!--      <div class="ziti" style="margin-left: 60px;margin-top: 15px">手牌号：{{ taihao }}</div>-->
      <div class="ziti" style="margin-left: 60px;margin-top: 15px">
        <el-form style="margin-bottom: -15px">
          <el-form-item label="手牌号：" label-width="124px">
            <el-input placeholder="请输入手牌号" v-model="taihao"/>
          </el-form-item>
        </el-form>
      </div>

      <!--取并按钮-->
      <div class="anniu">
        <el-button type="primary" class="dupn" @click.native.stop.prevent="submit">
          查 询
        </el-button>
        <el-button type="primary" plain class="dupn" :disabled="multiple" @click.native.stop.prevent="cancels">
          取 留
        </el-button>
        <el-button class="dupn" @click.native.stop.prevent="close">返 回</el-button>
      </div>
    </div>

    <!--表格-->
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; row-style:height'5px'"
        v-loading="loading"
        @selection-change="handleSelectionChange">

        <!--<el-table-column-->
        <!--  label=""-->
        <!--  min-width="10%">-->
        <!--  <img src="./zhishi.png" style="width: 29px;height: 29px;">-->
        <!--  &lt;!&ndash;<text></text>&ndash;&gt;-->
        <!--</el-table-column>-->
        <el-table-column type="selection" min-width="10%" align="center"/>

        <el-table-column
          prop="number"
          label="手牌号"
          min-width="30%"
          align="center">
          <template slot-scope="scope">
            <div @dblclick="cancel(scope.row.number)">{{ scope.row.number }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="time"
          label="开牌时间"
          min-width="40%"
          align="center">
          <template slot-scope="scope">
            <div @dblclick="cancel(scope.row.number)">{{ scope.row.time }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="btime"
          label="留牌时间"
          min-width="40%"
          align="center">
          <template slot-scope="scope">
            <div @dblclick="cancel(scope.row.number)">{{ scope.row.btime }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="cost"
          label="消费"
          min-width="30%"
          align="center">
          <template slot-scope="scope">
            <div @dblclick="cancel(scope.row.number)">{{ scope.row.cost }}</div>
          </template>
        </el-table-column>


      </el-table>

    </div>

    <el-dialog title="录入手牌号" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" label-width="80px">
        <el-form-item label="手牌号" prop="handBrand">
          <el-input v-model="taihao" placeholder="请输入手牌号"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import {quliu, listLiupai} from "@/api/module/cjl/details"

export default {
  inject: ['reload'], // 引入App.vue中定义的reload方法
  data() {
    return {
      // 台号（前台传入，此处做测试用）
      taihao: '',
      // 非多个禁用
      multiple: true,
      // 多选数组
      ids: [],
      tableData: [],
      // 遮罩层
      loading: false,
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: "1",
        retentionStatus: "0",
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      liugpaiList: [],
    }
  },
  created() {
    // this.queryParams.mergeHands = this.taihao;
    // this.getList();
  },
  mounted() {
    // this.setTaihao()
  },
  methods: {
    getList() {
      this.loading = true;
      //获取信息
      listLiupai(this.queryParams).then(res => {
        this.liupaiList = res.rows;
        this.total = res.total;
        this.loading = false;
        console.log(this.liupaiList);
        for (let i = 0; i < this.liupaiList.length; i++) {
          //留牌后未进行其他操作，取消留牌
          if (this.tableData.length === 0) {
            if (this.liupaiList[i].consumptionStatus === '0') {
              this.tableData.push({
                number: this.liupaiList[i].beforeLeave,
                time: this.setTime(this.liupaiList[i].openingTime),
                cost: parseFloat(this.liupaiList[i].totalAmount),
                btime: this.setTime(this.liupaiList[i].leaveTime)
              });
            } else {
              this.tableData.push({
                number: this.liupaiList[i].beforeLeave,
                time: this.setTime(this.liupaiList[i].openingTime),
                cost: parseFloat(0.00),
                btime: this.setTime(this.liupaiList[i].leaveTime)
              });
            }
          } else {
            let f = false
            for (let j = 0; j < this.tableData.length; j++) {
              if (this.tableData[j].number === this.liupaiList[i].beforeLeave) {
                f = true
                if (this.liupaiList[i].consumptionStatus === '0') {
                  this.tableData[j].cost += parseFloat(this.liupaiList[i].totalAmount)
                }
                break
              }
            }
            if (f) {
              continue
            } else {
              if(this.liupaiList[i].consumptionStatus === '0'){
                this.tableData.push({
                  number: this.liupaiList[i].beforeLeave,
                  time: this.setTime(this.liupaiList[i].openingTime),
                  cost: parseFloat(this.liupaiList[i].totalAmount),
                  btime: this.setTime(this.liupaiList[i].leaveTime)
                });
              }else{
                this.tableData.push({
                  number: this.liupaiList[i].beforeLeave,
                  time: this.setTime(this.liupaiList[i].openingTime),
                  cost: parseFloat(0.00),
                  btime: this.setTime(this.liupaiList[i].leaveTime)
                });
              }
            }
          }
        }
      })
    },
    setTime(time) {
      var ymd = time.substring(0, 10)
      // console.log(ymd)
      var tms = time.substring(11, 19)
      // console.log(tms)
      return ymd + ' ' + tms
    },
    cancel(number) {
      // console.log(index)
      this.queryParams.beforeLeave = number
      quliu(this.queryParams).then(res => {
        this.$modal.msgSuccess(number + "取留成功");
        this.submit()
      })
    },
    setTaihao() {
      this.open = true
    },
    submit() {
      // console.log(this.taihao)
      if (this.taihao === '') {
        this.$modal.msgError("手牌号不能为空")
      } else if (this.taihao.includes(' ')) {
        this.$modal.msgError("手牌号不能含有空格")
      }

      if (this.taihao !== '' && !this.taihao.includes(' ')) {
        this.tableData = []
        this.liupaiList = []
        this.open = false
        this.queryParams.handBrand = ''
        this.queryParams.beforeLeave = ''
        this.queryParams.note10 = this.taihao
        this.getList()
      }
    },
    close() {
      // this.open = false;
      this.$emit("closeDialog")
      this.taihao = ''
      this.tableData = []
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.number)
      this.multiple = !selection.length;
    },
    cancels() {
      for (let i = 0; i < this.ids.length; i++) {
        this.cancel(this.ids[i])
      }
      this.ids = []
    }
  }
}
</script>

<style lang="scss" scoped>

/*台号框*/
.pnumber {
  width: 100%;
  height: 100px;
  //background: #B3B3B3;
}

/*台号框的字体*/
.ziti {
  color: black;
  font-weight: 500;
  font-size: 28px;
  float: left;

  ::v-deep .el-form-item__label {
    font-weight: 500;
    font-size: 28px;
  }
}

/*表格框*/
.excel {
  margin-top: 3px;
  margin-left: 3px;

  ::v-deep .el-table--border .el-table__cell:first-child .cell {
    padding-right: 0;
    padding-left: 0;
  }


  ::v-deep .el-table--medium .el-table__cell {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  ::v-deep.el-table th.el-table__cell > .cell {
    padding-left: 0;
    padding-right: 0;
  }
}

.anniu {
  margin: 0;
  min-width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.dupn {
  position: relative;
}


</style>
